<template>
  <div class="app-container">
    <!-- 添加或修改租赁合同对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body v-drag-fullscreen>
        <el-row :gutter="20">
            <el-descriptions :column="2" size="max">
              <el-descriptions-item label="房间名称">{{data.roomName}}</el-descriptions-item>
              <el-descriptions-item label="合同类型">{{data.typeName}}</el-descriptions-item>
            </el-descriptions>
          <el-card class="box-card" style="position: relative;margin: 0px 5px; " >
            <div slot="header" class="clearfix">
              <span>合同信息</span>
            </div>
            <el-descriptions :column="3" size="max">
              <el-descriptions-item label="甲方(出租方)">{{data.partyNameType}}</el-descriptions-item>
              <el-descriptions-item label="甲方联系人">{{data.partyContacts}}</el-descriptions-item>
              <el-descriptions-item label="甲方手机号码">{{data.partyPhone}}</el-descriptions-item>
              <el-descriptions-item label="乙方(承租方">{{data.cusName}}</el-descriptions-item>
              <el-descriptions-item label="租户类型">{{dict.label.custom_type[data.customType]}}</el-descriptions-item>
              <el-descriptions-item label="联系人">{{data.partyPhone}}</el-descriptions-item>
              <el-descriptions-item label="手机号码">{{data.cellPhoneNumber}}</el-descriptions-item>
              <el-descriptions-item label="联系地址">{{data.contactAddress}}</el-descriptions-item>
              <el-descriptions-item label="身份证号">{{data.idCard}}</el-descriptions-item>
              <el-descriptions-item label="合同开始日期">{{data.beginTime}}</el-descriptions-item>
              <el-descriptions-item label="租赁期限">{{data.allottedTime}}<span>个月</span></el-descriptions-item>
              <el-descriptions-item label="合同结束日期">{{data.finishTime}}</el-descriptions-item>
              <el-descriptions-item label="保证金金额">{{data.chargeMoneys}}</el-descriptions-item>
              <el-descriptions-item label="费用标准">{{data.roomNormMoney}}</el-descriptions-item>
              <el-descriptions-item label="计费周期">{{dict.label.payment_rules[data.chargingCycle]}}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-row>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="form-flex" style="margin-top: 20px;">
          <fieldset>
            <legend>合同调整</legend>
            <el-col :span="8" :xs="24">
              <el-form-item label="合同开始日期" prop="beginTime">
                <el-date-picker clearable size="small"
                  v-model="form.beginTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择合同开始日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="租赁期限" prop="allottedTime">
                <el-input-number v-model="form.allottedTime"  :min="1"  label="请输入租赁期限" />月
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="合同结束日期" prop="finishTime">
                <el-date-picker clearable size="small"
                  v-model="form.finishTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择合同结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="费用标准" prop="roomNormMoney">
                <el-input-number v-model="form.roomNormMoney" :precision="2" :step="0.5" :min="0">
                </el-input-number>元   /月
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="计费周期" prop="chargingCycle">
                <el-select v-model="form.chargingCycle" placeholder="请选择计费周期" >
                  <el-option
                    v-for="item in dict.payment_rules"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item label="生成规则" prop="markerRule">
                <el-select v-model="form.markerRule" placeholder="请选择生成规则" >
                  <el-option
                    v-for="item in dict.charge_generate_type"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </fieldset>
            <el-col :span="24" :xs="24">
              <el-form-item label="变更原因" prop="leaseCause">
                <el-input v-model="form.leaseCause" type="textarea" placeholder="请输入内容"/>
              </el-form-item>
            </el-col>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getLeaseContract, addLeaseContract,beforeRecord} from "@/api/lease/leaseContract";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { contractMixin } from "./contractMixin";
  export default {
    name: "beforeForm",
    dicts: ['business_status', 'brand_level ', ' lease_contract_status','custom_type',  'payment_rules',  'charge_generate_type',   ],
    components:{ Treeselect },
    mixins:[ contractMixin ],
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //是否禁用
        disabled: false,
        customInfoOptions:[],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          beginTime: [
            {required: true, message: "合同开始日期不能为空", trigger: "blur"}
          ],
          finishTime: [
            {required: true, message: "合同结束日期不能为空", trigger: "blur"}
          ],
          roomNormId: [
            {required: true, message: "收费标准不能为空", trigger: "blur"}
          ],
          chargingCycle: [
            {required: true, message: "计费周期不能为空", trigger: "blur"}
          ],
          markerRule: [
            {required: true, message: "生成规则不能为空", trigger: "blur"}
          ],
        },
        type:null,
        firstPartyOptions:[],
        itemOptions:[],
        normOptions:[],
        activeName: 'bzj',
        data:{},
      };
    },
    created() {
    },
    watch:{
      'form.allottedTime'(v){
        this.form.finishTime= this.getNextMonthDay(this.form.beginTime,v);
      },
      'form.beginTime'(v){
        this.form.finishTime= this.getNextMonthDay(v,this.form.allottedTime);
      }
    },
    methods: {
      show(option) {
        this.reset();
        this.disabled = true
        this.type = option.type
        this.open = true;
        getLeaseContract(option.id).then(response => {
          this.data = response.data;
          this.title = "变更租赁合同";
          this.open = true;
        });
        getLeaseContract(option.id).then(res => {
          this.form = res.data;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("cancel")
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          communityId: null,
          resourceId: null,
          contractCategoryId: null,
          no: null,
          partyId: null,
          partyName: null,
          partyContacts: null,
          partyPhone: null,
          customId: null,
          customName: null,
          customType: null,
          linkman: null,
          cellPhoneNumber: null,
          contactAddress: null,
          idCard: null,
          beginTime: null,
          finishTime: null,
          allottedTime: null,
          signTime: null,
          leaseArea: null,
          businessStatus: null,
          businessBrand: null,
          brandLevel: null,
          businessScope: null,
          filePath: null,
          reletStatus: "0",
          status: "0",
          createBy: null,
          createDeptId: null,
          createDeptName: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          chargeId: '09',
          chargeMoneys: null,
          roomNormId: null,
          roomNormMoney: null,
          chargingCycle: null,
          markerRule: null,
          chargeNum: null,
          chargeTime: null,
          leaseCause:null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            beforeRecord(this.form).then(response => {
              this.msgSuccess("变更合同成功");
              this.cancel()
            });
          }
        });
      }
    }
  };
</script>
